/*
 * @message: 描述
 * @Author: Roy
 * @Email: cx_love_xc@163.com
 * @Github: cx_love_xc@163.com
 * @Date: 2022-01-12 15:05:59
 * @LastEditors: Roy
 * @LastEditTime: 2022-01-18 16:19:28
 * @Deprecated: 否
 * @FilePath: /blog/src/admin/index.jsx
 */
import React, { useCallback, useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, Route, Routes, Link } from 'react-router-dom'
import { Layout, Menu } from 'antd';
import 'normalize.css'
import 'antd/dist/antd.css';
import { getAuthClient, initAuthClient } from "@authing/react-ui-components";
import request from '../common/request';
import { Provider, useDispatch } from 'react-redux'
import Home from './container/home'
import BasicSetting from './container/setting'
import './style.scss';
import store from './container/store'
import { getChangeSchemaAction } from './container/store/action'
import styles from './style.module.scss'
import { parseJsonByString } from '../common/util'
import Login from './container/login'
import { getLoginStatus } from './util'

const { Header, Sider, Content } = Layout;

const useStore = () => {
  const dispatch = useDispatch();
  const changeSchema = (schema) => {
    dispatch(getChangeSchemaAction(schema));
  }

  return { changeSchema }
}


const Wrapper = () => {
  const [collapsed, setCollapsed] = useState(false);
  const { changeSchema } = useStore();
  const login = getLoginStatus();
  const photo = localStorage.photo;

  useEffect(() => {
    request.get('/api/schema/getLastOne').then((res) => {
      const data = res?.data;
      data && changeSchema(parseJsonByString(data.schema, {}));
    });
  }, [])
  const toggle = () => {
    setCollapsed(!collapsed)
  };
  const handleHomePageRedirect = useCallback(() => {
    window.location.href = '/'
  }, [])
  //退出登录
  const loginOut = useCallback(() => {
    initAuthClient({
      appId: "61e628aed302377c707e90a0",
    });

    getAuthClient().logout()
    // 需要业务软件清除本地保存的所有 token 和用户信息
    localStorage.removeItem('authingToken')
    localStorage.removeItem('tokenExpiredAt')
    localStorage.removeItem('photo')
    window.location.reload();
  }, [])

  return login ? (
    <HashRouter>

      <Layout>
        <Sider className={styles.sidebar} trigger={null} collapsible collapsed={collapsed}>
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['admin-home']}>
            <Menu.Item key="admin-home" >
              <Link to="/">
                <span className="iconfont">&#xe7a7;</span>首页内容管理
              </Link>
            </Menu.Item>
            <Menu.Item key="admin-setting" >
              <Link to="setting">
                <span className="iconfont">&#xe7a7;</span>基础内容配置
              </Link>
            </Menu.Item>
            <Menu.Item key="admin-back" onClick={handleHomePageRedirect}>
              <span className="iconfont">&#xe609;</span>返回用户页面
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header className={styles.header}>
            {collapsed ? <span className='iconfont' onClick={toggle}>&#xe62c;</span> : <span className='iconfont' onClick={toggle}>&#xe629;</span>}
            <img src={photo} alt='avatar' className={styles.avatar} onClick={loginOut} />
          </Header>
          <Content className={styles.content}>
            <Routes>
              <Route path='/' exact element={<Home />} ></Route>
              <Route path='/setting' exact element={<BasicSetting />} ></Route>
            </Routes>
          </Content>
        </Layout>
      </Layout>
    </HashRouter>
  ) : <Login />
}

ReactDOM.render(
  <Provider store={store}>
    <Wrapper />
  </Provider>,
  document.getElementById('root')
);

